<template>
    <div class="infowrap infowrap3 indexwrap">
    <el-dialog
        v-model="dialogVisible"
        title="图片查看"
        width="800"
        custom-class="diyclass"
    >
      <div class="picwrap" v-if="list.value.length>0">
        <div :class="[index%3==2?'child2':'','child']" v-for="(item,index) in list.value" :key="index">
            <img @click="prLook(index)" :src="baserUrl+item.url" class="cpic">
            <div class="name">{{ item.createTime }}</div>
        </div>
      </div>
      <div class="picwrap" v-else>
        <div class="nodata">
            暂无数据
        </div>
        
        </div>
      <div class="fy">
            <div class="total flexcenter">
              共 <span>{{ total }}</span>项数据
            </div>
            <el-pagination background
              :currentPage="pageNum"
              @current-change="currentChange"
              :page-size="9"
            layout="prev, pager, next" :total="total" />
        </div>
      <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="cancel">
                关闭
                </el-button>
            </span>
        </template>
    </el-dialog>
        </div>
</template>  
<script lang="ts">
import Setting from "@/public/config"
import { preview } from 'vue3-preview-image'
import { post, get, deletePost } from "@/public/request/api";
import { defineComponent,toRefs,computed, ref, reactive, onMounted, onUnmounted } from "vue";
  export default defineComponent({
    components: {},
    props:{
      
    },
    setup(props,{emit}) {
      let dialogVisible=ref(false)
      let list=reactive({
        value:[]
      })
      let total=ref(0)
      //const baserUrl=Setting.HttpApiAddress
      const baserUrl='https://iqq.etkqq.gov.cn/api-app'
      let pageNum=ref(1)
      let typeGet=null
      let idGet=null
      function cancel(){
        pageNum.value=1
        dialogVisible.value=false
      }
      function currentChange(e){
        pageNum.value=e
        lookPic(typeGet,idGet)
     }
     function prLook(index){
      let newlist=[]
      list.value.forEach(item=>{
        newlist.push(
          baserUrl+item.url
        )
      })
      preview(index,newlist)
     }
     function lookPic(type,id){
        typeGet=type
        idGet=id
      get("/device/monitor", {
        id,
        pageNum:pageNum.value,
        pageSize:9,
      }).then((res) => {
        dialogVisible.value=true
        list.value=res.pageInfo.list
        total.value=res.pageInfo.total
      })
    }
      return {
        baserUrl,
        prLook,
        lookPic,
        dialogVisible,
        cancel,
        currentChange,
        pageNum,
        list,
        total
      };
    },
  });
  </script>
    
<style lang="scss">
 
 

</style>

<style lang="scss" scoped>
  @import "@/assets/scss/index.scss";
  .nodata{
    font-size: 18px;
    color: #fff;
    display: flex;
    justify-content: center;
   width: 100%;
  }
.fy{
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .total{
      color: rgba(255, 255, 255, 0.60);
      font-size: 10px;
      span{
        font-size: 20px;
      }
    }
    
}
  .picwrap{
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .child2{
        margin-right: 0!important;
    }
    .child{
        display: flex;
        flex-direction: column;
        color: #fff;
        align-items: center;
        margin-right: 20px;
        
        .name{
            margin: 10px 0;
            font-size: 18px;
        }
       .cpic{
        width: 240px;
        height: 140px;
        cursor: pointer;
      
       }
    }
  }
</style>
    